<script setup>
import { ref , onMounted, computed} from 'vue'
import {attendanceDataAPI } from '@/api/my.js'

// 考勤数据
const attendanceData = ref([])

// 获取考勤数据
const getAttendanceData = async () => {
  const res = await attendanceDataAPI()
  attendanceData.value = res.data
  console.log(res)
}

// 初始化调用
onMounted(() => {
  getAttendanceData()
})

// 学期数据
const pickerData  =['第一学期', '第二学期']

// 选定分类箱
const selectedItem =  ref(0)

// 改变选项
const changeItem = (e) => {
  // selectedItem.value = index
  selectedItem.value = e.detail.value
}

// 考勤渲染数据

</script>

<template>
  <div class="my">
    <view class="top">
      <image
        src="../../static/images/avatar6.jpg"
        mode="widthFix"
      />
      <view class="left">
        <view class="header">
          <view class="name">顾小言</view>
      <view class="gender">男</view>
      </view>
      <view class="major">信息管理与信息系统</view>
      </view>
    </view>
    <view class="content">
      <view class="title">
        <text>考勤记录</text>
        <picker @change="changeItem" :value="selectedItem" class="picker" mode="selector" :range="pickerData" range-key=""  >
          <text >{{ pickerData[selectedItem] }}</text>
        </picker>
        </view>
			<uni-group class="uni-group" :title="item.reason" mode="card" v-for="(item, index) in attendanceData[selectedItem]?.attendanceList" >
				<view class="item">
          <text class="teacher">{{ item.teacher }}</text>
          <text class="date">{{ item.date }}</text>
          <text class=week>第{{ item.section.split("(")[0] }}周</text>
        </view>
			</uni-group>

    </view>
  </div>
</template>



<style scoped lang="scss" >
.my {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  background-color: #efefef;
  height: 100vh;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx 0;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      margin-left: 100rpx;
    }
    .left {
      flex: 1;
      margin-left: 100rpx;
      .header {
        .name {
          font-size: 40rpx;
          font-weight: 700;
          color: #333;
        }
        .gender {
          font-size: 36rpx;
          color: #666;
        }
      }
      .major {
        color: #999;
      }
    }
  }
  .content {
    background-color: #fff;
    width: 100%;
    margin-top: 20rpx;
    // padding: 20rpx;
    border-radius: 20rpx;
    padding-bottom: 30rpx;
    .title {
      font-size: 40rpx;
      font-weight: 700;
      color: #333;
      margin-left: 40rpx;
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;
      .picker {
        margin-right: 100rpx;
        font-size: 30rpx;
        font-weight: 400;
      }
    }                                                                        
    ::v-deep .uni-group {
      margin-top: 60rpx;
      // background-color: pink;
    }
    .uni-group {
      ::v-deep .uni-group__title {
        background-color:#fc5531;
      }
      ::v-deep .uni-group__title-text {
        color: #fff;
      }
      .item {
        display: flex;
        justify-content: space-between;
        .teacher {
          color: #5DEFE5;
        }
      }
    }
    
  }
}
</style>